<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>2-组件传值</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<div class="count">父组件的计数器：{{count}}</div>
			<!-- 传值  属性传值  静态传值-->
			<!-- <counter count="30"></counter> -->
			<!-- 动态传值 -->
			<counter :count="count" msg="提示:你确定要删除此项吗？"></counter>
		</div>
	</body>
</html>
<script>
	// 局部组件
	const counter = {
		// 接收
		// props:['count','msg'],
		// 接收另外一种写法
		// props:{
		// 	count:{
		// 		// 数据类型检查
		// 		type:Number,
		// 		// 自定义校验检查
		// 		validator:function(val){
		// 			return val < 100
		// 		},
		// 		// 参数的默认值
		// 		default:60
		// 	},
		// 	msg:{
		// 		type:String,
		// 		// 必传
		// 		required:true
		// 	}
		// },
		data(){
			return{
				params:undefined
			}
		},
		mounted(){
			// this.params = this.$attrs
		},
		// template:
		// `
		// 	<div v-bind="$attrs">子组件的计数器:{{$attrs}}</div>
		// 	<div :count="$attrs.count"></div>
		// `
		template:
		`
			<div v-if="$attrs.count">子组件的计数器:{{$attrs.count}}</div>
			<div>{{$attrs.msg}}</div>
		`
	}
	const app = Vue.createApp({
		components:{
			counter
		},
		data(){
			return{
				count:20
			}
		}
	});
	
	const vm = app.mount("#app")	
</script>